import React from 'react';
import { Link } from 'react-router-dom';
import Nav from '../Nav';
import CarouselBox from '../components/Carousel';

import styles from './index.module.less';

import img1 from '../../../asset/images/new/img1.png';
import img2 from '../../../asset/images/new/img2.png';

export default class LatestNew extends React.Component {
  state={
    newList: [
      {
        key: 1,
        sort: '最新资讯',
        title: '纸价的涨跌只是短期常态，决定未来的是新制造模式',
        content: '解读：那就是“可能涨价”意味的是希望涨价或者说是对市场的一种放风，看看市场反应，如果反应积极就真的涨，如果效果不理想就不涨。100-200元的涨价幅度本身来讲不大，而且还是一个模糊的区间价，也就是即使涨具体落实的幅度也不能确定，最终看市场接受度。',
        website: '中国纸业网',
        date: '2018-09-21  12:12',
        see: '2222',
        zan: '8888',
        newsPic: require('../../../asset/images/new/news2.png'),
      },
      {
        key: 2,
        sort: '国内',
        title: '纸价的涨跌只是短期常态，决定未来的是新制造模式',
        content: '解读：那就是“可能涨价”意味的是希望涨价或者说是对市场的一种放风，看看市场反应，如果反应积极就真的涨，如果效果不理想就不涨。100-200元的涨价幅度本身来讲不大，而且还是一个模糊的区间价，也就是即使涨具体落实的幅度也不能确定，最终看市场接受度。',
        website: '中国纸业网',
        date: '2018-09-21  12:12',
        see: '2222',
        zan: '8888',
        newsPic: '',
      },
      {
        key: 3,
        sort: '国内',
        title: '纸价的涨跌只是短期常态，决定未来的是新制造模式',
        content: '解读：那就是“可能涨价”意味的是希望涨价或者说是对市场的一种放风，看看市场反应，如果反应积极就真的涨，如果效果不理想就不涨。100-200元的涨价幅度本身来讲不大，而且还是一个模糊的区间价，也就是即使涨具体落实的幅度也不能确定，最终看市场接受度。',
        website: '中国纸业网',
        date: '2018-09-21  12:12',
        see: '2222',
        zan: '8888',
        newsPic: require('../../../asset/images/new/news2.png'),
      },
      {
        key: 4,
        sort: '国内',
        title: '纸价的涨跌只是短期常态，决定未来的是新制造模式',
        content: '解读：那就是“可能涨价”意味的是希望涨价或者说是对市场的一种放风，看看市场反应，如果反应积极就真的涨，如果效果不理想就不涨。100-200元的涨价幅度本身来讲不大，而且还是一个模糊的区间价，也就是即使涨具体落实的幅度也不能确定，最终看市场接受度。',
        website: '中国纸业网',
        date: '2018-09-21  12:12',
        see: '2222',
        zan: '8888',
        newsPic: '',
      },
      {
        key: 5,
        sort: '国内',
        title: '纸价的涨跌只是短期常态，决定未来的是新制造模式',
        content: '解读：那就是“可能涨价”意味的是希望涨价或者说是对市场的一种放风，看看市场反应，如果反应积极就真的涨，如果效果不理想就不涨。100-200元的涨价幅度本身来讲不大，而且还是一个模糊的区间价，也就是即使涨具体落实的幅度也不能确定，最终看市场接受度。',
        website: '中国纸业网',
        date: '2018-09-21  12:12',
        see: '2222',
        zan: '8888',
        newsPic: require('../../../asset/images/new/news2.png'),
      },
      {
        key: 6,
        sort: '国内',
        title: '纸价的涨跌只是短期常态，决定未来的是新制造模式',
        content: '解读：那就是“可能涨价”意味的是希望涨价或者说是对市场的一种放风，看看市场反应，如果反应积极就真的涨，如果效果不理想就不涨。100-200元的涨价幅度本身来讲不大，而且还是一个模糊的区间价，也就是即使涨具体落实的幅度也不能确定，最终看市场接受度。',
        website: '中国纸业网',
        date: '2018-09-21  12:12',
        see: '2222',
        zan: '8888',
        newsPic: '',
      },
      {
        key: 7,
        sort: '国内',
        title: '纸价的涨跌只是短期常态，决定未来的是新制造模式',
        content: '解读：那就是“可能涨价”意味的是希望涨价或者说是对市场的一种放风，看看市场反应，如果反应积极就真的涨，如果效果不理想就不涨。100-200元的涨价幅度本身来讲不大，而且还是一个模糊的区间价，也就是即使涨具体落实的幅度也不能确定，最终看市场接受度。',
        website: '中国纸业网',
        date: '2018-09-21  12:12',
        see: '2222',
        zan: '8888',
        newsPic: '',
      },
      {
        key: 8,
        sort: '国内',
        title: '纸价的涨跌只是短期常态，决定未来的是新制造模式',
        content: '解读：那就是“可能涨价”意味的是希望涨价或者说是对市场的一种放风，看看市场反应，如果反应积极就真的涨，如果效果不理想就不涨。100-200元的涨价幅度本身来讲不大，而且还是一个模糊的区间价，也就是即使涨具体落实的幅度也不能确定，最终看市场接受度。',
        website: '中国纸业网',
        date: '2018-09-21  12:12',
        see: '2222',
        zan: '8888',
        newsPic: require('../../../asset/images/new/news2.png'),
      },
      {
        key: 9,
        sort: '国内',
        title: '纸价的涨跌只是短期常态，决定未来的是新制造模式',
        content: '解读：那就是“可能涨价”意味的是希望涨价或者说是对市场的一种放风，看看市场反应，如果反应积极就真的涨，如果效果不理想就不涨。100-200元的涨价幅度本身来讲不大，而且还是一个模糊的区间价，也就是即使涨具体落实的幅度也不能确定，最终看市场接受度。',
        website: '中国纸业网',
        date: '2018-09-21  12:12',
        see: '2222',
        zan: '8888',
        newsPic: require('../../../asset/images/new/news2.png'),
      },
    ],
  }
  render() {
    const { newList } = this.state;
    return (
      <React.Fragment>
        <React.Fragment>
          {
            newList.map((item, index) => {
              return (
                <div className={`${styles.content} ${styles.clearfix}`} key={item.key}>
                  <div className={styles.leftContent + ' ' + styles.pullLeft} style={{ display: item.newsPic === '' ? 'none' : 'block' }}>
                    <Link to='/news-details' target='_blank'><img src={item.newsPic} alt=""/></Link>
                  </div>
                  <div className={styles.rightContent}>
                    <div className={styles.headerTitle}><Link to='/news-details'>[{item.sort}]{item.title}</Link> </div>
                    <div className={styles.contentTitle}><Link to='/news-details'>{item.content}</Link></div>
                    <div className={`${styles.footerText}`}>
                      <div className={styles.pullLeft}>
                        <span className={styles.s1}>{item.website}</span>
                        <span className={styles.s2}>|</span>
                        <span className={styles.s3}>{item.date}</span>
                      </div>
                      <div className={styles.pullRight}>
                        <i className={`iconfont icon-chakan ${styles.chakanIcon}`}></i>
                        <span className={styles.s4}> {item.see}</span>
                        <i className={`iconfont icon-dianzan ${styles.chakanIcon}`}></i>
                        <span className={styles.s5}> {item.zan}</span>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })
          }
          <div className={styles.loader}>
            <button className={styles.loaderBtn}>加载更多</button>
          </div>
        </React.Fragment>
      </React.Fragment>
    );
  }
}
